<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/order.css">
</head>

<body>
    <!-- 网页头部 -->
    <div class="header">
        <div class="header-content">
            <img class="logo" src="./images/logo.png" alt="">
            <div class="tool-bar"></div>
        </div>
    </div>
    <!-- 导航菜单 -->
    <div class="menu">
        <div class="menu-item">首页</div>
        <div class="menu-item">所有商品</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
    </div>

    <div class="order-progress"></div>

    <div class="order-detail">
        <div class="left-content">
            <!-- 收货信息 -->
            <div class="detail-item">
                <div class="item-title">
                    <span>收货信息</span>
                    <span class="add-address">新增地址</span>
                </div>
                <div class="item-content">
                    <div class="address-item active">
                        <div class="header">
                            <div class="left">
                                <span>张三</span>
                                <span>[默认地址]</span>
                            </div>
                            <div class="right">
                                <span>删除</span>
                                <span>编辑</span>
                            </div>
                        </div>
                        <div class="content">
                            <p class="address-text">成都市高新区成都市高新区成都市高新区成都市高新区成都市高新区成都市高新区成都市高新区成都市高新区成都市高新区成都市高新区成都市高新区
                            </p>
                            <p>13511111111</p>
                        </div>
                    </div>
                    <div class="address-item">
                        <div class="header">
                            <div class="left">
                                <span>张三</span>
                                <span>[默认地址]</span>
                            </div>
                            <div class="right">
                                <span>删除</span>
                                <span>编辑</span>
                            </div>
                        </div>
                        <div class="content">
                            <p class="address-text">成都市高新区成都市高新区成都市高新
                            </p>
                            <p>13511111111</p>
                        </div>
                    </div>
                    <div class="address-item">
                        <div class="header"></div>
                        <div class="content"></div>
                    </div>
                    <div class="address-item">
                        <div class="header"></div>
                        <div class="content"></div>
                    </div>

                </div>
            </div>
            <!-- 支付方式 -->
            <div class="detail-item">
                <div class="item-title">
                    <span>支付方式</span>
                </div>
                <div class="item-content">
                    <div class="select-item">
                        <img src="./images/way01.jpg" alt="">
                    </div>
                    <div class="select-item active">
                        <img src="./images/way02.jpg" alt="">
                    </div>
                    <div class="select-item">
                        <img src="./images/way03.jpg" alt="">
                    </div>
                    <div class="select-item">
                        <span>货到付款</span>
                    </div>
                </div>
            </div>
            <!-- 选择快递 -->
            <div class="detail-item" style="margin-top: 40px;">
                <div class="item-title">
                    <span>选择快递</span>
                </div>
                <div class="item-content">
                    <div class="select-item active">
                        <span>货到付款</span>
                    </div>
                    <div class="select-item">
                        <span>货到付款</span>
                    </div>
                    <div class="select-item">
                        <span>货到付款</span>
                    </div>
                    <div class="select-item">
                        <span>货到付款</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-content">
            <div class="order-list">
                <div class="header flex-bt">
                    <span>订单内容</span>
                    <span>返回购物车</span>
                </div>
                <div class="order-item">
                    <img src="./images/order01.jpg" alt="">
                    <div class="order-info flex-bt">
                        <div>
                            <p>创意现代简约干花花瓶摆件</p>
                            <p>颜色分类：烟灰色玻璃瓶</p>
                            <p>数量：1</p>
                        </div>
                        <div>￥69.9</div>
                    </div>
                </div>
                <div class="order-item">
                    <img src="./images/order01.jpg" alt="">
                    <div class="order-info flex-bt">
                        <div>
                            <p>创意现代简约干花花瓶摆件</p>
                            <p>颜色分类：烟灰色玻璃瓶</p>
                            <p>数量：1</p>
                        </div>
                        <div>￥69.9</div>
                    </div>
                </div>
                <div class="order-item">
                    <img src="./images/order01.jpg" alt="">
                    <div class="order-info flex-bt">
                        <div>
                            <p>创意现代简约干花花瓶摆件</p>
                            <p>颜色分类：烟灰色玻璃瓶</p>
                            <p>数量：1</p>
                        </div>
                        <div>￥69.9</div>
                    </div>
                </div>
            </div>
            <div class="order-price"></div>
            <div class="total-price"></div>
            <div class="pay-button"></div>
        </div>
    </div>



    <!-- 产品服务 -->
    <div class="service">
        <div class="service-item">
            <div class="service-icon icon1"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon2"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon3"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item last-item">
            <div class="service-icon icon4"></div>
            <span>7天无理由退货</span>
        </div>
    </div>
    <!-- 网页底部 -->
    <div class="footer">
        <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
        <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </div>
</body>

</html>